<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>学生GPA查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .search-container {
            margin: 20px 0;
            text-align: center;
        }
        .search-container input {
            padding: 8px;
            width: 300px;
        }
        .search-container button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        .loading {
            text-align: center;
            margin: 20px 0;
            color: #666;
        }
        .error {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
<h1>学生GPA查询</h1>

<div class="search-container">
    <input type="text" id="studentName" placeholder="输入学生姓名">
    <button onclick="searchStudent()">查询</button>
</div>

<div id="loading" class="loading" style="display: none;">加载中...</div>
<div id="error" class="error" style="display: none;"></div>

<div id="resultContainer">
    <table id="resultTable">
        <thead>
        <tr>
            <th>姓名</th>
            <th>学期</th>
            <th>预测GPA</th>
        </tr>
        </thead>
        <tbody id="resultBody">
        <!-- 结果将在这里动态加载 -->
        </tbody>
    </table>
</div>

<script>
    function searchStudent() {
        const studentName = document.getElementById('studentName').value.trim();
        if (!studentName) {
            alert('请输入学生姓名');
            return;
        }

        const loading = document.getElementById('loading');
        const error = document.getElementById('error');
        const resultBody = document.getElementById('resultBody');

        // 重置UI状态
        loading.style.display = 'block';
        error.style.display = 'none';
        resultBody.innerHTML = '';

        // 发送AJAX请求
        fetch('0101?name=' + encodeURIComponent(studentName))
            .then(response => {
                if (!response.ok) throw new Error('请求失败，状态码：' + response.status);
                return response.json();
            })
            .then(data => {
                console.log('接口返回的原始数据:', data);

                // 处理数据格式
                const studentData = Array.isArray(data) ? data : [data];
                if (studentData.length === 0) throw new Error('未查询到数据');

                // 使用DOM API而非字符串拼接
                studentData.forEach(item => {
                    const row = document.createElement('tr');

                    const nameCell = document.createElement('td');
                    nameCell.textContent = item.name || '无姓名';

                    const semesterCell = document.createElement('td');
                    semesterCell.textContent = item.semester;

                    const gpaCell = document.createElement('td');
                    gpaCell.textContent = item.gpa !== undefined ? item.gpa : '未计算';

                    row.appendChild(nameCell);
                    row.appendChild(semesterCell);
                    row.appendChild(gpaCell);

                    resultBody.appendChild(row);
                });

                console.log('表格渲染完成，当前行数:', resultBody.rows.length);

                // 临时样式调试
                resultBody.style.backgroundColor = 'white';
                resultBody.style.color = 'black';
            })
            .catch(err => {
                console.error('请求异常:', err);
                error.textContent = '错误：' + err.message;
                error.style.display = 'block';
            })
            .finally(() => {
                loading.style.display = 'none';
            });
    }
</script>
</body>
</html>